<template>
    <div>
        <div class='div_box'>
            <div v-for="(item, index) in playList" :key="index">
                <div>
                    <i class="iconfont shijian" style="color: #7367F0;margin-right: 5px;"></i>
                    {{ item.createTime }}
                </div>
                <video controls :src="item.url"></video>
            </div>
        </div>
        <pagination :page.sync="page" :limit.sync="limit"  :layout="'total, prev, pager, next'" :total="total" @pagination="getPlayList" class="pagination">
        </pagination>
    </div>
</template>

<script>
import { reqPlayList } from "@api/api.js";
import Pagination from "@components/Pagination.vue";
export default {
    props: {
        deviceInfo: {
            type: Object,
            default: () => { },
        },
    },
    components: {
        Pagination
    },
    data() {
        return {
            playList: [],
            page: 1,
            limit: 8,
            total: 0,
        }
    },
    computed: {
    },
    watch: {},
    methods: {
        async getPlayList() {
            // console.log(this.deviceInfo);
            const res = await reqPlayList(this.page, this.limit, this.deviceInfo.imei);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.total = res.data.total;
            this.playList = res.data.rows
        }
    },
    created() {

    },
    mounted() {

    }
}
</script>

<style lang='less' scoped>
.div_box {
    height: 72vh;
    // height: calc(100vh - 122px);
    overflow: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

    >div {
        width: 25%;
        padding: 10px;
        box-sizing: border-box;

        >div:first-of-type {
            color: @primaryThemeTxtColor2;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        video {
            width: 100%;
            height: auto;
        }
    }
}
// 分页器
::v-deep .el-pagination.is-background .el-pager li{
    color: #b4b7bd;
    &:hover{
        color: #b4b7bd;
    }
}
</style>